<template>
    <div class="subline-box">
        <div class="box-title">
            <p>{{ registerInfo.title }}</p>
        </div>
        <div class="input-box">
            <transition name="el-fade-in-linear">
                <div v-show="tipfalg.account" class="username-placeholder">{{ registerInfo.email }}</div>
            </transition>
            <input v-model="step1.account" type="email" :placeholder="registerInfo.email">
        </div>
        <br />
        <br />
        <br />
        <br />
        <div class="input-box">

            <transition name="el-fade-in-linear">
                <div v-show="tipfalg.username" class="password-placeholder">{{ registerInfo.nicname }}</div>
            </transition>
            <input v-model="step1.username" type="text" :placeholder="registerInfo.nicname">
        </div>
        <br />
        <br />
        <br />
        <br />
        <div class="input-box">

            <transition name="el-fade-in-linear">
                <div v-show="tipfalg.phone" class="password-placeholder">{{ registerInfo.phone }}</div>
            </transition>
            <input v-model="step1.phone" type="text" :placeholder="registerInfo.phone">
        </div>
        <br />
        <br />
        <br />
        <br />
        <div class="input-box">

            <transition name="el-fade-in-linear">
                <div v-show="tipfalg.password" class="password-placeholder">{{ registerInfo.password }}</div>
            </transition>
            <input type="password" :placeholder="registerInfo.password" v-model="step1.password">
        </div>
        <br />
        <br />
        <br />
        <br />
        <div class="input-box">
            <input type="password" :placeholder="registerInfo.reInput" v-model="step1.reinput">
        </div>
        <div class="button-box">
            <el-button style="width:100%" type="primary">{{ registerInfo.nextStep }}</el-button>
        </div>
    </div>
</template>
<style scoped>
.box-title {
    font-size: 30px;
    text-align: left;

}

.input-box {
    position: relative;
}

/* 设置输入框的样式为无边框且只有在输入的时候有显示下划线 */
input {
    border: none;
    outline: none;
    font-size: 28px;
    padding: 15px 0px 15px 0px;
    width: 450px;
    transition: 0.8s;
    background-color: rgba(232,232,232,0);
    /* 设置提示文本的样式 */
    color: #3d4963;
    float: left;
    border-bottom: 1px solid rgb(199, 199, 199);
}

/* 设置输入框获取焦点之后的样子 */
input:focus {
    border-bottom: 1px solid #5259ff;

}

.username-placeholder {
    position: absolute;
    top: -10px;
    text-align: left;
    font-size: 13px;
    color: #bcbcbc;
}

.password-placeholder {
    position: absolute;
    top: -10px;
    text-align: left;
    font-size: 13px;
    color: #bcbcbc;
}

/* 输入文本时触发的样式 */

input::placeholder {
    color: #bcbcbc;
    font-size: 18px;
    font-weight: 100;
}

.subline-box {
    position: relative;
}

.button-box {
    position: relative;
    margin-top: 100px;
    width: 70vh;
}
</style>
<script>
export default {
    data() {
        return {
            registerInfo: {
                // eslint-disable-next-line no-undef
                title: DICTIONARY['zh-cn'].registerInfo.step1.title,
                // eslint-disable-next-line no-undef
                email: DICTIONARY['zh-cn'].registerInfo.step1.email,                // eslint-disable-next-line no-undef
                nicname: DICTIONARY['zh-cn'].registerInfo.step1.nicname,
                // eslint-disable-next-line no-undef
                phone: DICTIONARY['zh-cn'].registerInfo.step1.phone,                // eslint-disable-next-line no-undef
                password: DICTIONARY['zh-cn'].registerInfo.step1.password,                // eslint-disable-next-line no-undef
                reInput: DICTIONARY['zh-cn'].registerInfo.step1.reInput,
                // eslint-disable-next-line no-undef
                nextStep: DICTIONARY['zh-cn'].registerInfo.finish,
                // eslint-disable-next-line no-undef
            },
            tipfalg: {
                username: false,
                password: false,
                account: false,
                phone: false,
            },
            step1: {
                account: "",
                phone: "",
                username: "",
                reinput: "",
                password: "",
            },
            rememberMe: false,
        }
    },
    watch: {
        'step1.username'() {
            // eslint-disable-next-line no-undef
            if (this.step1.username == "") {
                this.tipfalg.username = false;
            }
            else {
                this.tipfalg.username = true;
            }
        },
        'step1.password'() {
            if (this.step1.password == "") {
                this.tipfalg.password = false;
            }
            else {
                this.tipfalg.password = true;
            }
        },
        'step1.account'() {
            if (this.step1.account == "") {
                this.tipfalg.account = false;
            }
            else {
                this.tipfalg.account = true;
            }
        },
        'step1.phone'() {
            if (this.step1.phone == "") {
                this.tipfalg.phone = false;
            }
            else {
                this.tipfalg.phone = true;
            }
        }

    }


}
</script>
